<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS Filter</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<!--表达式中添加过滤器-->
<!--<div ng-app="myApp" ng-controller="personCtrl">-->
    <!--<p>姓名为 {{lastName | uppercase}}</p>-->
<!--</div>-->

<!--<div ng-app="myApp" ng-controller="personCtrl">-->
    <!--<p>姓名为 {{lastName | lowercase}}</p>-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('personCtrl', function ($scope) {-->
        <!--$scope.lastName = "Doe";-->
    <!--})-->
<!--</script>-->

<!--currency过滤器-->
<!--<div ng-app="myApp" ng-controller="costCtrl">-->
    <!--<p>数量: <input type="number" ng-model="quantity"></p>-->
    <!--<p>价格: <input type="number" ng-model="price"></p>-->
    <!--<br>-->
    <!--<p>总价= {{ (quantity * price) | currency}}</p>-->
<!--</div>-->

<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('costCtrl', function ($scope) {-->
        <!--$scope.quantity = 2;-->
        <!--$scope.price = 9.99;-->
    <!--})-->
<!--</script>-->

<!--向指令添加过滤器-->
<!--<div ng-app="myApp" ng-controller="nameCtrl">-->
    <!--<p>循环对象:</p>-->
    <!--<ul>-->
        <!--<li ng-repeat="x in names | orderBy: 'country'">-->
            <!--{{x.name + ', ' + x.country}}-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->

<!--过滤输入-->
<!--<div ng-app="myApp" ng-controller="nameCtrl">-->
    <!--<p><input type="text" ng-model="test"></p>-->

    <!--<ul>-->
        <!--<li ng-repeat="x in names | filter: test | orderBy: 'country'">-->
            <!--{{(x.name | uppercase) + ' ' + x.country}}-->
        <!--</li>-->
    <!--</ul>-->
<!--</div>-->
<!--<script src="js/nameCtrl.js"></script>-->

<!--自定义过滤器-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
    <!--姓名: {{msg | reverse}}-->
<!--</div>-->
<!--<script>-->
    <!--var app = angular.module('myApp', []);-->
    <!--app.controller('myCtrl', function ($scope) {-->
        <!--$scope.msg = 'Runoob';-->
    <!--})-->

    <!--app.filter('reverse', function () {-->
        <!--return function (text) {-->
            <!--return text.split("").reverse().join("");-->
        <!--}-->
    <!--})-->
<!--</script>-->

<div ng-app="">
    1.uppercase, lowercase大小写转换 <br>
    {{"lower cap string" | uppercase}} <br>
    {{"TANK IS GOOD" | lowercase }}<br>
    <br>

    2.date格式化<br>
    {{ 1490161945000 | date: "yyyy-MM-dd HH:mm:ss"}}<br>
    <br>

    3.number格式化(保留小数)<br>
    {{1499016.194500 | number: 2}}<br>
    <br>

    4.currency格式化<br>
    {{250 | currency}}<br>
    {{250 | currency: "RMB ￥ "}}<br>
    <br>

    5.filter查找<br>
    <p>输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中, 该过滤器</p>
    <p>后跟一个冒号和一个模型名称</p>
    {{ [{"age": 20, "id": 10, "name": "iphone"},
    {"age": 12, "id": 11, "name": "sunm xing"},
    {"age": 44, "id": 12, "name": "test abc"}
    ] | filter:{"name": "iphone"} }}<br>
    <br>

    6.limitTo截取<br>
    {{"1234567890" | limitTo: 6}}<br>
    {{"1234567890" | limitTo: -4}}<br>
    <br>

    7.orderBy排序<br>
    {{ [{"age": 20, "id": 10, "name": "iphone"},
    {"age": 12, "id": 11, "name": "sunm xing"},
    {"age": 44, "id": 12, "name": "test abc"}
    ] | orderBy:"id":true }}<br>
</div>
</body>
</html>